<template>
  <view :class="['container', { dark: theme == 'dark' }]">
    <view :class="['flex', 'top', 'fixedTop', 'funs', { darksss: theme == 'dark' }]">
      <!-- <view class="flex tags">
				<view :class="['tag',tagAcitveIndex==0?'tagAcitve':'']" @click="changeTab(0)">币币指数</view>
				<view :class="['tag',tagAcitveIndex==1?'tagAcitve':'']" @click="changeTab(1)">永续合约</view>
			</view> -->
      <!-- <view class="flex" style="width: 30vw;">
				<u-search placeholder="币种" v-model="search"  borderColor="#55547b54" bgColor="#fff" shape="square" inputAlign="center" height="55" :showAction='false'></u-search>
				<text class="iconfont icon-lingdang1"></text>
			</view> -->
      <u-search
        shape="square"
        bg-color="#FFF"
        search-icon-color="#909399"
        placeholder-color="#909399"
        :show-action="false"
        :animation="true"
        :placeholder="$t('bico.W388')"
        v-model="search"
      ></u-search>
    </view>

    <view class="lind">
      <view
        :class="['flex', 'lindBox', { lindBoxsss: theme == 'dark' }]"
        @click="toAdv"
      >
        <text class="iconfont icon-laba2"></text>
        <swiper
          style="width: 100%; height: 40rpx"
          :vertical="true"
          :autoplay="true"
          :interval="3000"
          :circular="true"
        >
          <swiper-item
            class="flex alcenter"
            v-for="(item, i) in noticeList"
            :key="i"
          >
            <view class="lindText">{{ item.title }}</view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="zfbt"></view>
    <view style="height: 150rpx">
      <swiper
        style="height: 150rpx"
        :indicator-dots="true"
        :autoplay="true"
        :interval="3000"
        :duration="1000"
        :circular="true"
      >
        <swiper-item
          v-for="(item, index) in zfList"
          :key="index"
        >
          <view class="flex swiper-item">
            <view
              class="siist siist1"
              v-for="(item1, index1) in item"
              @click="linkKline(tagAcitveIndex, item1.symbol)"
            >
              <view class="flex swItemV1 swi1">
                <view class="swItemV11">{{ item1.symbol.split('/')[0] }}</view>
                <view class="swItemV12">/{{ item1.symbol.split('/')[1] }}</view>
              </view>
              <view
                class="flex swi2"
                v-if="item1.rose > 0"
              >
                <view>+{{ item1.rose | toFixed2 }}%</view>
                <text class="iconfont icon-diagonal-arrow-right-up-outline"></text>
              </view>
              <view
                class="flex swi22"
                v-else
              >
                <view>{{ item1.rose | toFixed2 }}%</view>
                <text class="iconfont icon-diagonal-arrow-right-down-outline"></text>
              </view>
              <view
                v-if="false"
                class="swi3"
                >≈ {{ Math.floor(item1.cny * 100) / 100 }} CNY</view
              >
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 加一条线 -->
    <u-line color="#5559691f"></u-line>
    <!-- 间隔槽 -->
    <u-gap
      height="20"
      bg-color=""
    ></u-gap>

    <view class="flex jxbd">
      <view
        :class="['jxbdItem', tagAcitveIndex == 0 ? 'jxbdAcitve' : '']"
        @click="changeTab(0)"
        >{{ $t('bico.W389') }}</view
      >
      <view
        :class="['jxbdItem', tagAcitveIndex == 1 ? 'jxbdAcitve' : '']"
        @click="changeTab(1)"
        >{{ $t('bico.W390') }}</view
      >
      <!-- <view :class="['jxbdItem',tagAcitveIndex==4?'jxbdAcitve':'']" @click="changeTab(4)">{{$t('bico.W391')}}</view> -->
      <!-- <view
        :class="['jxbdItem', tagAcitveIndex == 5 ? 'jxbdAcitve' : '']"
        @click="changeTab(5)"
        >{{ $t('bico.W392') }}</view
      > -->
    </view>

    <!-- <view :class="['flex','symTags',{'darkddd':theme=='dark'}]">
			<view :class="['symTag',symTagIndex==0?'symTagActive':'']" @click="symTagClick(0)">BTC</view>
			<view :class="['symTag',symTagIndex==1?'symTagActive':'']" @click="symTagClick(1)">ETH</view>
			<view :class="['symTag',symTagIndex==2?'symTagActive':'']" @click="symTagClick(2)">USDT</view>
			<view :class="['symTag',symTagIndex==3?'symTagActive':'']" @click="symTagClick(3)">TRX</view>
		</view> -->

    <view :class="['list', 'funs', { darksss: theme == 'dark' }]">
      <!-- 加一条线 -->
      <u-line color="#5559691f"></u-line>
      <!-- 间隔槽 -->
      <u-gap
        height="20"
        bg-color=""
      ></u-gap>
      <view
        v-show="tagAcitveIndex != 5"
        class="flex listItem"
        v-for="(item, i) in marketLists"
        :key="i"
        @click="linkKline(tagAcitveIndex, item.symbol)"
      >
        <view class="item1">
          <view class="flex item1V1">
            <image
              :src="item.img"
              style="
                width: 5vw;
                height: 5vw;
                margin-right: 2vw;
                border-radius: 10vw;
                position: relative;
                top: 1.8vw;
              "
            ></image>
            <view class="item1V11">{{ item.symbol.split('/')[0] }}</view>
            <view class="item1V12">/{{ item.symbol.split('/')[1] }}</view>
          </view>
          <view class="item1V2 tvngp">24H:{{ item.amount | toFixed4 }}</view>
        </view>
        <view class="item2">
          <view :class="['item2V1', Number(item.rose) < 0 ? 'redColor' : 'greenColor']"
            >${{ item.close }}</view
          >
          <view
            v-if="false"
            class="item1V2"
            >≈ {{ Math.floor(item.cny * 100) / 100 }} CNY</view
          >
        </view>
        <view :class="['item3', Number(item.rose) < 0 ? 'bgRed' : 'bgGreen']"
          >{{ Number(item.rose) < 0 ? '' : '+' }}{{ item.rose | toFixed2 }}%</view
        >
      </view>
      <view
        v-show="tagAcitveIndex == 5"
        class="flex listItem"
        v-for="(item, i) in optionList"
        :key="i"
        @click="linkKline(tagAcitveIndex, item.symbol, item)"
      >
        <view class="item1">
          <view class="flex item1V1">
            <view class="item1V11">{{ item.symbol }} {{ $t('bico.W691') }}</view>
          </view>
          <view class="item1V2"></view>
        </view>
        <view class="item2"> </view>
        <view :class="['item3', Number(item.rose) < 0 ? 'bgRed' : 'bgGreen']"
          >{{ Number(item.rose) < 0 ? '' : '+' }}{{ item.rose | toFixed2 }}%</view
        >
        <!-- <view :class="['item3',(Number(item.rose))<0?'bgRed':'bgGreen']">{{$t('login.c20')}} {{item.maxOptionNo}} {{$t('login.c21')}}</view> -->
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import { huobiTicket, info, commonNewsList, optionSymbolInfo } from '../../common/apiString.js';

var socketInstance;
export default {
  name: 'childMarket',
  data() {
    return {
      optionList: [],
      search: '',
      tagAcitveIndex: 0,
      jxbdIndex: 0,
      jxbdIndex: 0,
      symTagIndex: 0,

      noticeList: [],
      zfList: [], //涨幅榜

      changeIndex: 1,
      changeName: 'symbol',
      ttt: null,
      symbolTypeList: [
        { name: '币币', type: '0' },
        { name: '合约', type: '1' }
      ],
      isActive: 0,
      marketLists: [],
      fiat_convert_cny: 6.8,
      legal_name: '',
      isfilter1: 1,
      isfilter2: 0,
      isfilter3: 0
    };
  },
  filters: {
    toFixed2: function (value) {
      value = Number(value);
      return value.toFixed(2);
    },
    toFixed3: function (value) {
      value = Number(value);
      return value.toFixed(3);
    },
    toFixed4: function (value) {
      value = Number(value);
      return value.toFixed(4);
    }
  },
  computed: {
    ...mapState({
      theme: state => state.theme
    })
  },
  onPullDownRefresh() {
    this.changeFooter();
    this.getNoticeList();
    this.getList();
  },
  onLoad(e) {
    uni.setNavigationBarTitle({
      title: this.$t('bico.W393')
    });
    this.$utils.setTheme(this.theme);
    this.changeFooter();
    this.getNoticeList();
  },
  onShow() {
    var that = this;
    this.ttt = setInterval(function () {
      that.socketFun();
    }, 2000);
  },
  mounted() {
    let that = this;
    this.getList();

    // this.ttt=setTimeout(()=>{
    // 	this.socketFun()
    // },100)
  },
  onHide() {
    clearTimeout(this.ttt);
  },
  beforeDestroy() {
    clearInterval(this.ttt);
  },

  methods: {
    changeFooter() {
      uni.setTabBarItem({
        index: 0,
        text: this.$t('tabBar.index')
      });
      uni.setTabBarItem({
        index: 1,
        text: this.$t('tabBar.business')
      });
      uni.setTabBarItem({
        index: 2,
        text: this.$t('tabBar.perpetual')
      });
      uni.setTabBarItem({
        index: 3,
        text: this.$t('tabBar.agreements')
      });
      uni.setTabBarItem({
        index: 4,
        text: this.$t('tabBar.mine')
      });
    },
    linkKline(type, symbol, item) {
      uni.setStorageSync('klineSymbol', symbol);
      if (type == 5) {
        uni.navigateTo({
          url: '/pages/Option/Option?id=' + item.id //期权秒合约
        });
      }
      if (type == 1) {
        uni.switchTab({
          url: '/pages/lever/lever'
        });
      }
      if (type == 0) {
        uni.switchTab({
          url: '/pages/trade/trade'
        });
      }
    },
    symTagClick(index) {
      if (index == this.symTagIndex) return;
      this.symTagIndex = index;
    },
    toAdv() {
      uni.navigateTo({
        url: '/pages/home/news'
      });
    },
    //公告
    getNoticeList() {
      this.$utils.initData({ url: commonNewsList, data: { c_id: 4 }, type: 'POST' }, (res, msg) => {
        this.noticeList = res.records;
        // if(res.records.length){
        // 	this.noticeList = res.records[0]
        // }else{
        // 	this.noticeList = {
        // 		content:'暂无公告'
        // 	}
        // }
      });
    },

    socketFun() {
      this.getList();
    },

    // 过滤
    filterList(name, isflag) {
      this.marketLists.sort(function (i, j) {
        if (i[name] == 'AI/USDT') {
          return 'E'.charCodeAt(0) - j[name].charCodeAt(0);
        }
        if (j[name] == 'AI/USDT') {
          return 'E'.charCodeAt(0) - i[name].charCodeAt(0);
        }
        if (name == 'symbol') {
          if (isflag == 1) {
            return i[name].charCodeAt(0) - j[name].charCodeAt(0);
          } else {
            return j[name].charCodeAt(0) - i[name].charCodeAt(0);
          }
        } else {
          if (isflag == 1) {
            return i[name] - j[name];
          } else {
            return j[name] - i[name];
          }
        }
      });
    },
    // 点击切换
    tapFilters(e, name) {
      this.changeIndex = e;
      this.changeName = name;
      // console.log(e,name);
      if (e == 1) {
        this.isfilter2 = 0;
        this.isfilter3 = 0;
        this.isfilter1 = this.isfilter1 == 1 ? 2 : 1;
        this.filterList(name, this.isfilter1);
      }
      if (e == 2) {
        this.isfilter1 = 0;
        this.isfilter3 = 0;
        this.isfilter2 = this.isfilter2 == 1 ? 2 : 1;
        this.filterList(name, this.isfilter2);
      }
      if (e == 3) {
        this.isfilter2 = 0;
        this.isfilter1 = 0;
        this.isfilter3 = this.isfilter3 == 1 ? 2 : 1;
        this.filterList(name, this.isfilter3);
      }
    },
    tapFilters2(e, name) {
      // this.changeIndex=e
      // this.changeName = name
      // console.log(e,name);
      if (e == 1) {
        this.isfilter2 = 0;
        this.isfilter3 = 0;
        this.isfilter1 = this.isfilter1;
        this.filterList(name, this.isfilter1);
      }
      if (e == 2) {
        this.isfilter1 = 0;
        this.isfilter3 = 0;
        this.isfilter2 = this.isfilter2;
        this.filterList(name, this.isfilter2);
      }
      if (e == 3) {
        this.isfilter2 = 0;
        this.isfilter1 = 0;
        this.isfilter3 = this.isfilter3;
        this.filterList(name, this.isfilter3);
      }
    },
    // 行情列表
    getList() {
      var that = this;
      //var type=0
      //uni.showLoading();
      that.$utils.initData(
        { url: huobiTicket, data: { type: that.tagAcitveIndex }, type: 'post' },
        (res, msg) => {
          that.marketLists = [];
          var str2 = that.search.toLocaleUpperCase();
          res.forEach((item, index) => {
            if (item.symbol.search(str2) != -1) {
              that.marketLists.push(item);
            }
          });
          this.setZfList(that.marketLists);
          this.tapFilters2(this.changeIndex, this.changeName);
          try {
            uni.stopPullDownRefresh();
          } catch (e) {}
          // if(res.length>0){
          // 	that.legal_name=res[0].symbol;
          // }
          //uni.hideLoading();
        }
      );
    },
    //设置涨幅榜
    setZfList(list) {
      // let d = list.filter(v=>v.rose>0);
      let d = list.slice(0, 9);
      let data = [];
      for (let i = 0; i < d.length; i += 3) {
        data.push(d.slice(i, i + 3));
      }
      this.zfList = data;
    },
    // 获取自选列表
    getCollectList() {
      this.$utils.initDataToken({ url: 'user/zixuan_list' }, res => {
        uni.stopPullDownRefresh();
        // this.marketLists=res;
        // if(res.length>0){
        // 	this.legal_name=res[0].name;
        // }
      });
    },
    changeTab(e, name = '') {
      this.isfilter3 = 0;
      this.isfilter2 = 0;
      this.isfilter1 = 1;
      this.isActive = e;
      this.tagAcitveIndex = e;
      if (e == 5) {
        this.$utils.initDataToken(
          {
            url: optionSymbolInfo,
            type: 'get'
          },
          (res, msg) => {
            // for (let s of res.data) {
            // 	var symbolData=this.marketLists.filter((item) => {
            // 		return item.symbol == s.symbol;
            // 	})
            // 	s.rose = symbolData[0].rose
            // }

            this.optionList = res.data;
          }
        );
      } else {
        this.getList();
      }
    }
  }
};
</script>
<style scoped>
.fixedTop {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
.flex {
  display: flex;
  align-items: center;
}
.list {
  padding: 20rpx 32rpx 80rpx 32rpx;
}
.listItem {
  padding: 24rpx 0;
  justify-content: space-between;
}
.item1 {
  width: 40%;
}
.item2 {
  flex: 1;
  //text-align: center;
}
.item1V1 {
  align-items: baseline;
}
.item1V11 {
  margin-right: 1vw;
  font-size: 3.6vw;
  font-weight: 400;
  font-family: Times New Roman, Times, serif;
}
.item1V12 {
  font-size: 3.6vw;
  font-weight: 400;
  font-family: Times New Roman, Times, serif;
}
.item1V2 {
  padding-top: 4px;
  color: #999;
  font-size: 12px;
}
.item2V1 {
  font-size: 3.6;
  font-weight: 600;
}
.item3 {
  font-weight: 600;
  color: #fff;
  width: 64px;
  border-radius: 4px;
  text-align: center;
  padding: 7px 0;
  font-size: 14px;
}
.upb {
  background-color: #03ad90;
}
.downb {
  background-color: #cd3d58;
}

.symTags {
  padding: 0 32rpx 0;
  box-shadow: 0 16rpx 20rpx #eee;
  justify-content: space-around;
}
.darkddd {
  box-shadow: 0 0 24rpx rgba(234, 234, 234, 0.2);
}
.symTag {
  font-size: 14px;
  font-weight: 400;
  padding: 20rpx 20rpx 20rpx;
  border-bottom: solid 6rpx transparent;
}
.symTagActive {
  border-bottom: solid 6rpx #3e38ec;
}
.jxbd {
  padding: 0px 2vw 0px;
}
.jxbdItem {
  font-size: 3.4;
  margin-right: 0vw;
  font-weight: 400;
  width: 50%;
  border-radius: 1vw;
  text-align: center;
  padding: 2vw 0;
}
.jxbdAcitve {
  color: #fff;
  background-color: #205fec;
}
.siist {
  flex: 1;
  text-align: center;
}
.siist2 {
  border-left: solid 1rpx #ddd;
  border-right: solid 1rpx #ddd;
}
.swi1,
.swi2,
.swi22 {
  justify-content: center;
}
.icon-diagonal-arrow-right-up-outline {
  color: #27af82;
  font-size: 36rpx;
}
.swi2 > view {
  color: #27af82;
  font-size: 14px;
  font-weight: 400;
  margin-right: 12rpx;
}
.swi22 > view {
  color: #d74e5a;
  font-size: 14px;
  font-weight: 400;
  margin-right: 12rpx;
}
.icon-diagonal-arrow-right-down-outline {
  color: #d74e5a;
  font-size: 36rpx;
}
.swi3 {
  color: #999;
  font-size: 26rpx;
}

.zfbt {
  font-size: 3.6vw;
  font-weight: 400;
  padding: 14vw 0 4vw 4vw;
}
.lind {
  padding: 0 32rpx;
  margin-top: -20rpx;
}
.lindBox {
  padding: 16rpx 28rpx;
  width: 100%;
  box-shadow: 0 0 14rpx #ddd;
  border-radius: 40rpx;
}
.lindBoxsss {
  border-bottom: solid 0.5px #36373e36;
}
.lindText {
  font-weight: normal;
  font-size: 28rpx;
  padding-left: 40rpx;
}
.sw {
  position: relative;
  top: -25px;
  padding: 126px 0px 10px 16px;
  overflow-y: scroll;
}
.swItem {
  margin-right: 30rpx;
  padding: 20rpx 60rpx 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 0 20rpx #aaa;
  border-radius: 10rpx;
  position: relative;
}
.darkccc {
  background: #061623 !important;
  top: 10rpx;
  box-shadow: 0 0 24rpx rgba(234, 234, 234, 0.2);
}
.swItemIcon {
  position: absolute;
  right: 0;
  top: 0;
}
.swItemIcon > image {
  width: 30rpx;
  height: 36rpx;
}
.swItemV1 {
  align-items: baseline;
}
.swItemV11 {
  margin-right: 4px;
  font-size: 3.6vw;
  font-weight: 400;
  font-family: Times New Roman, Times, serif;
}
.swItemV12 {
  font-size: 3.6vw;
  font-weight: 400;
  font-family: Times New Roman, Times, serif;
}
.swItemV2 {
  font-weight: 400;
  font-size: 14px;
  padding: 6px 0;
}
.swItemV3 {
  font-size: 12px;
  padding-bottom: 6px;
}
.swItemV4 {
  color: #999;
  font-size: 26rpx;
  width: 130px;
}
.red {
  color: #ffa500;
}

.top {
  color: #fff;
  padding: 10vw 4vw 4vw;
  justify-content: space-between;
  background-color: #3e38ec;
}
.tags {
  align-items: baseline;
}
.tag {
  margin-right: 40rpx;
  font-size: 14px;
  font-weight: 400;
}
.tagAcitve {
  font-size: 14px;
  font-weight: 400;
}
.icon-search {
  font-size: 18px;
  font-weight: 400;
  margin-right: 40rpx;
}
.icon-lingdang1 {
  font-size: 24px;
}
.u-action {
  color: #fff;
}
.tvngp {
  position: relative;
  left: 6.5vw;
}
</style>
